<template>
  <div class="breadcrumb-wrapper">
    <span style="line-height: 1;">当前位置：</span>
    <el-breadcrumb style="line-height: 1;" class="app-breadcrumb" :separator="fileSplit">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item,index) in breadCrumbList" :key="item.path">
          <span v-if="index===breadCrumbList.length-1" class="no-redirect">{{ item.name }}</span>
          <a v-else @click.prevent="handleLink(item.path)">{{ item.name }}</a>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'BreadCrumb',
  computed: {
    fileSplit: {
      get() {
        return process.env.NODE_ENV === 'development' ? '\\' : '/'
      },
      set() {
        return ''
      }
    },
    //  面包屑导航栏数组
    breadCrumbList: {
      get() {
        const split = process.env.NODE_ENV === 'development' ? '\\' : '/'
        const filePath = this.$route.query.filePath
        const filePathList = filePath ? filePath.split(split) : []
        // 返回结果数组
        const res = []
        // 存放祖先路径
        const _path = []
        for (let i = 0; i < filePathList.length; i++) {
          if (filePathList[i]) {
            _path.push(filePathList[i] + split)
            res.push({
              path: _path.join(''),
              name: filePathList[i]
            })
          } else if (i === 0) {
            //  根目录
            filePathList[i] = split
            _path.push(filePathList[i])
            res.push({
              path: split,
              name: '全部文件'
            })
          }
        }
        return res
      },
      set() {
        return []
      }
    }
  },
  methods: {
    handleLink(path) {
      this.$router.push({
        query: { filePath: path }
      })
      this.$emit('getTableData')
      this.$emit('showStorage')
    }
  }
}
</script>

<style lang="scss" scoped>
.breadcrumb-wrapper {
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
  display: flex;
  .title, >>> .el-breadcrumb {
    height: 30px;
    line-height: 30px;
    .no-redirect {
      color: #97a8be;
      cursor: text;
    }
  }
}
</style>
